<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>后台管理</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
	<link rel="stylesheet" type="text/css" href="assets/css/jquery.dataTables.min.css">
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/jquery.cookie.js"></script>
	<script src="assets/js/jquery.form.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/bootstrap.autocomplete.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/admin.js"></script>
</head>
<body>
<div class="appLoading" style="display: none;" tabindex="-1" id="appLoading">
  <div class="loading-dialog">
    <div class="loading-msg" id="appLoadingMsg">正在处理...</div>
    <div class="loading-icon" id="appicon"></div>
  </div>
</div>
<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="modalTitle"></h4>
      </div>
      <div class="modal-body" id="modalHtml">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="closeModalBtn" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submitModalBtn">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade bs-example-modal-lg" id="modal-lg">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="modalTitle-lg"></h4>
      </div>
      <div class="modal-body" id="modalHtml-lg">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="closeModalBtn-lg" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submitModalBtn-lg">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
	<div class="container-fluid" id="mainContainer"
		style="background: #FFF;">
		<div class="accountpage">
			<div class="row pt10">
				<div class="col-lg-12">
					<table id="accountTable" cellpadding="0" cellspacing="0" border="0"
						class="table table-striped table-bordered " id="example">
						<thead>
							<tr>
								<th rowspan="2" style="line-height: 65px;width:60px;">序号</th>
								<th  class="tcenter">基础信息</th>
								<th colspan="4" class="tcenter">联系方式</th>
								<th rowspan="2" style="line-height: 65px;">操作</th>
							</tr>
							<tr>
								<th style="width:100px;">用户名</th>
								<th>昵称</th>
								<th>手机</th>
								<th>QQ</th>
								<th>邮箱</th>
							</tr>
						<thead>
						<tfoot>
							<tr>
								<th>序号</th>
								<th>用户名</th>
								<th>昵称</th>
								<th>手机</th>
								<th>QQ</th>
								<th>邮箱</th>
								<th>操作</th>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
	</div>
	
<script type="text/javascript" charset="utf-8">
	$(function() {
		var modal = "#modal";
		var modalTitle = "#modalTitle";
		var modalHtml = "#modalHtml";
		var modalSubmitBtn = "#submitModalBtn";
		var accountTable = $('#accountTable').DataTable(
						{
							"oLanguage" : {
								"sUrl" : "assets/js/dtcn.json"
							},
								"stateSave": true,
								"processing": true,
								"bProcessing": true,
								"serverSide": true,
							"ajaxSource" : "<%=basePath%>account/ajax?rand="+ Math.random(),
							"columns" : [
									//第一排的序号 
									{
										"searchable" : false,
										"orderable" : false,
										"sClass" : "tcenter",
										"data" : "index",
										"defaultContent" : "",
										"targets" : 0
									},
									{
										"data" : "username",
										"sClass" : "tcenter"
									},
									{
										"data" : "nickname",
										"sClass" : "tcenter"
									},
									{
										"data" : "phone",
										"sClass" : "tcenter"
									},
									{
										"data" : "qq",
										"sClass" : "tcenter"
									},
									{
										"data" : "email",
										"sClass" : "tcenter"
									},
									//放置最后一排的操作按钮
									{
										"targets" : -1,
										"data" : null,
										"sClass" : "tcenter",
										"orderable" : false,
										"mRender" : function(obj) {
											var opt = '<a class="cus_editbtn" objId = "'
													+ obj.id
													+ '" permission="'
													+ obj.permission
													+ '" href="javascript:void(0)" title="修改"><img src="assets/css/imgs/update.png" align="absmiddle" /></a>&nbsp';
											// 异步删除
											opt += '<a class="cus_delbtn" objId = "'
													+ obj.id
													+ '" href="javascript:void(0)" title="删除"><img src="assets/css/imgs/delete.png" align="absmiddle" /></a>&nbsp';
											return opt;
										}
									} ],
							"order" : [ [ 1, 'asc' ] ], //默认排序行
							"fnRowCallback" : function(nRow, aData,iDisplayIndex) {
								$('td:eq(0)', nRow).html((accountTable.page() * accountTable.page.len())+ iDisplayIndex + 1);
								return nRow;
							}
						});
		//给查询框绑定回车事件
		accountTable.on('init.dt', function(e, settings) {
			$(modalSubmitBtn).unbind("click");
			$(".dataTables_filter input").unbind();
			$(".dataTables_filter input").attr("placeholder", "敲回车查询");
			$(".dataTables_filter input").keyup(function(event) {
				if (event.keyCode == 13) {
					accountTable.search($(this).val()).draw();
				}
			});

			$('.accountpage').on('click', 'table tr', function() {
				accountTable.$('tr.selected').removeClass('selected');
				$(this).addClass('selected');
			});

			//删除事件
			$('.accountpage').on(
					'click',
					'.cus_delbtn',
					function() {
						if (confirm('确定删除?')) {
							appLoading("正在删除信息,请稍后...");
							var _this = $(this);
							$.ajax({
								type : "POST",
								url : "/account/delete",
								data : {
									id : _this.attr("objId")
								},
								datatype : "json",
								success : function(result) {
									if (result.success) {
										accountTable.row('.selected').remove()
												.draw(false);
										closeAppLoading();
									} else {
										appErrorMsg(result.msg == null ? result
												: result.msg, 1000);
									}
								}
							});
						} else {
							closeAppLoadingNow();
						}
					});
			function modalSubmitCallback(data) {
				closeWaittingForm("accountForm");
				if (data.success) {
					$(modal).modal("hide");
					appSuccessMsg("操作成功", 800);
					setTimeout(function() {
						accountTable.draw(false);
					}, 800);
				} else {
					appErrorMsg(data.msg == null ? data : data.msg, 2000);
				}
			}

			$(modalSubmitBtn).click(function() {
				submitMe(function(data) {
					modalSubmitCallback(data);
				});
			});
			//编辑事件
			$('.accountpage').on(
					'click',
					".cus_editbtn",
					function() {
						appLoading("正在执行,请稍后...");
						var _this = $(this);
						$(modalTitle).text("用户信息编辑");
						var id = _this.attr("objId");
						var permission = _this.attr("permission");
						var url = "/account/edit?id=" + id + "&permission="
								+ permission + "&rand=" + Math.random();
						$(modalHtml).empty();
						$.get(url, function(data) {
							closeAppLoadingNow();
							$(modalHtml).html(data);
							$(modal).modal("show");

						});

					});

		});

	});
</script>
</body>
</html>
